import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import Swiper from 'swiper';

const hos_det_adr = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/hos_det_adr.png');

let hos_det_c_swiper,hos_det_h_swiper;
export default React.createClass({
  componentDidMount:function(){
    hos_det_h_swiper = new Swiper('.hos_det_h_swiper',{
      paginationClickable: true,
      autoplay:2800,
      speed:800,
      calculateHeight:true,
      onInit:function(){
        $('.hos_det_h_swiper').find('.pagination var').text(parseInt(hos_det_h_swiper.activeIndex)+1);
        $('.hos_det_h_swiper').find('.pagination em').text($('.hos_det_h_swiper .swiper-slide').length)
      },
      onTouchStart:function(){
        hos_det_h_swiper.stopAutoplay();
      },
      onTouchEnd:function(){
        hos_det_h_swiper.startAutoplay();
      },
      onSlideChangeStart:function(myswiper){
        $('.hos_det_h_swiper').find('.pagination var').text(parseInt(hos_det_h_swiper.activeIndex)+1)
      }
    });
    //中间
    hos_det_c_swiper = new Swiper('.hos_det_c_swiper',{
      paginationClickable: true,
      slidesPerView: 'auto',
      calculateHeight:true,
    });

    $('.m_hos_det .more').each(function(){
      let statu = $(this).statu = false;
      let h = $(this).parent('.item').find('.txt').height();
      $(this).click(function(){
        statu = !statu;
        console.log(statu);
        let my_em =$(this).find('em');
        let this_txt = $(this).parent('.item').find('.txt');
        let this_h = this_txt.find('.wrapper').height();
        if(statu){
          my_em.html('&#9650;')
          $(this).parent('.item').find('.txt').height(this_h)
        }else{
          my_em.html('&#9660;')
          $(this).parent('.item').find('.txt').height(h)
        }

      })
    })

  },
  componentDidUpdate(){
     hos_det_h_swiper.reInit();
     hos_det_c_swiper.reInit();
     this.setPriWidth();

  },
  render:function(){
    return(
      <div className="m_hos_det">
       <header>
        <div className="hos_det_h_swiper swiper-container">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{height:"4.8rem"}} />
            </div>
            <div className="swiper-slide">
              <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{height:"4.8rem"}} />
            </div>
            <div className="swiper-slide">
              <ImageLazy src="https://dummyimage.com/750x480/b293a4/fff" style={{height:"4.8rem"}} />
            </div>

          </div>
          <div className="pagination"><var>8</var>/<em>8</em></div>
        </div>
        <div className="hos_logo border_b1">
          <div className="left box"><span style={{'background-image':"url(http://img.xiami.net/images/album/img30/1930/3772411429710303_2.jpg)"}}></span></div>
          <div className="right">
            <h4>北京凯润婷医疗美容医院</h4>资质：民营一级医院
          </div>
        </div>
        <div className="address border_b1">
          <ImageLazy src={hos_det_adr} />地址：双井富力城星光大道A9-6
        </div>
       </header>

       <div className="contant">
       <div className="item border_b1">
         <h3 className="tit_sty1">
           医院介绍<br/><small>Hospital introduction</small>
         </h3>
         <div className="txt box">
           <div className="wrapper">
           <p>这里是美丽社介绍：此刻我位于中关村的钱景财富，办公室那头是今天采访介绍的对象：赵春荣。他是对外饰鼻形修饰鼻形修饰鼻形修饰鼻形.赵春荣。他是对外饰鼻形修饰鼻形修饰鼻形修饰鼻形</p>
           </div>
         </div>
         <a href="javascript:void(0)" className="more">
           MORE <em>&#9660;</em>
         </a>
        </div>
        <div className="item border_b1">
          <h3 className="tit_sty1">
            专家团队<br/><small>Expert team</small>
          </h3>
          <div className="swiper-container common_swiper hos_det_c_swiper">
            <div className="swiper-wrapper">
              <div className="swiper-slide">
                <ImageLazy src="https://dummyimage.com/572x360/b293a4/fff&text='to doc det'" />
              </div>
              <div className="swiper-slide">
                <ImageLazy src="https://dummyimage.com/572x360/b293a4/fff" />
              </div>
              <div className="swiper-slide">
                <ImageLazy src="https://dummyimage.com/572x360/b293a4/fff" />
              </div>
            </div>
          </div>
        </div>

        <div className="item border_b1">
          <h3 className="tit_sty1">
            服务项目<br/><small>Service Items</small>
          </h3>
          <div className="text_list">
            <NavLink to="/sever/detail" className="common_item border_b1">
              <div className="left">
                <img src="https://dummyimage.com/200x200/fff/000&text=doctor" style={{height:'2rem'}} />
              </div>
              <div className="right">
                <h4>点击到服务详情</h4>
                <p>
                  赵医生·医学博士<br/>
                  北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院
                </p>
                <div className="price"><span>¥ 999.00</span></div><div className="o_price">原价：¥ 5999.00</div>
              </div>
            </NavLink>
            <NavLink to="/sever/detail" className="common_item border_b1">
              <div className="left">
                <img src="https://dummyimage.com/200x200/fff/000&text=doctor" style={{height:'2rem'}} />
              </div>
              <div className="right">
                <h4>万利脂肪手术经验</h4>
                <p>
                  赵医生·医学博士<br/>
                  北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院
                </p>
                <div className="price"><span>¥ 999.00</span></div><div className="o_price">原价：¥ 5999.00</div>
              </div>
            </NavLink>
            <NavLink to="/sever/detail" className="common_item border_b1">
              <div className="left">
                <img src="https://dummyimage.com/200x200/fff/000&text=doctor" style={{height:'2rem'}} />
              </div>
              <div className="right">
                <h4>万利脂肪手术经验</h4>
                <p>
                  赵医生·医学博士<br/>
                  北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院北京斯嘉丽医疗美容医院
                </p>
                <div className="price"><span>¥ 999.00</span></div><div className="o_price">原价：¥ 5999.00</div>
              </div>
            </NavLink>
          </div>
        </div>

       </div>

       <div className="fix_tel box border_t1">
         <a href="tel:18810716960">电话咨询</a>
       </div>

      </div>
    )
  }
})
